<div>
    <h2 style="border-bottom: 1px dashed black;margin-bottom:10px;">社团信息</h2>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
            <p style="color:red">*</p>学校名称:</div>
        <div nz-col [nzSpan]="14"><nz-input (click)="showModal('university')" [(ngModel)]="school"></nz-input></div>
    </div>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
            <p style="color:red">*</p>校区:
        </div>
        <div nz-col [nzSpan]="14"><nz-input (click)="showModal('area')" [(ngModel)]="areaName"></nz-input></div>
    </div>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
            <p style="color:red">*</p>社团名称:
        </div>
        <div nz-col [nzSpan]="14"><nz-input (click)="showModal('campusname')" [(ngModel)]="campusName"></nz-input></div>
    </div>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
            <p style="color:red">*</p>所属部门:
        </div>
        <div nz-col [nzSpan]="14"><nz-input [(ngModel)]="departMent"></nz-input></div>
    </div>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
            <p style="color:red">*</p>部门职位:
        </div>
        <div nz-col [nzSpan]="14">
            <nz-select [(ngModel)]="selectOpt" [nzPlaceHolder]="'choose option'" style="width:50%">
                <nz-option *ngFor="let op of position" [nzValue]="op.value" [nzLabel]="op.option">{{op.option}}</nz-option>
            </nz-select>
        </div>
    </div>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px"><p style="color:red">*</p>擅长类型:</div>
        <div nz-col [nzSpan]="14">
            <nz-checkbox-group [(ngModel)]="checkOptions" (ngModelChange)="updateStat(checkOptions)"></nz-checkbox-group>
        </div>
    </div>
    <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
        <button nz-button [nzType]="'primary'" (click)="submit()">提交</button>
    </div>
</div>
<nz-modal [nzVisible]="isVisible1" [nzTitle]="'请选择学校'" [nzFooter]="modalfooter"
          [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
    <ng-template #modalContent>
        <div *ngIf="routename=='university'">
            <div style="display:flex;justify-content: space-around;padding-bottom: 10px">
                <nz-select [(ngModel)]="prOpt" [nzPlaceHolder]="'请选择省'" (nzOpenChange)="chooseProvince(prOpt,0)" style="width:30%">
                    <nz-option *ngFor="let op of province" [nzValue]="op" [nzLabel]="op.province">{{op.province}}</nz-option>
                </nz-select>
                <nz-select [(ngModel)]="cOpt" [nzPlaceHolder]="'请选择市'" style="width:30%">
                    <nz-option *ngFor="let op of cityList" [nzValue]="op.cityid" [nzLabel]="op.city">{{op.city}}</nz-option>
                </nz-select>
                <nz-input [nzType]="'search'" [nzPlaceHolder]="'input search text'" [(ngModel)]="school"
                          style="width: 200px;" (nzOnSearch)="onSearch($event)"></nz-input>
            </div>
            <div style="display:flex;justify-content: space-between;height:300px;flex-direction: row;
            flex-wrap:wrap;background-color:#F0F0F0">
                <div *ngFor="let sch of schoolList" (click)="chooseSch(sch)"
                     style="width:30%;height:10%;margin-right:10px;padding-bottom: 10px;background-color: #FFFFFF">{{sch.universityname}}</div>
            </div>
        </div>
        <div *ngIf="routename=='area'">
            <div>
                请在下面列表里选择你的校区
            </div>
            <div style="display:flex;justify-content: flex-start;height:200px;flex-direction: row;flex-wrap:wrap;background-color: 	#F8F8F8">
                <div *ngFor="let ar of area" style="border:1px solid black;width:30%;height:10%;margin-right: 10px" (click)="chooseArea(ar)">{{ar.areaname}}</div>
            </div>
        </div>
        <div *ngIf="routename=='campusname'">
            <div *ngIf="addOrReturn">
                <div style="display:flex;justify-content: flex-start">
                    <p>请在下面列表里选择你所在的社团，如果没有手动添加</p>
                    <button nz-button (click)="addCampus()" [nzType]="'primary'">创建社团</button>
                </div>
                <div style="display:flex;justify-content: flex-start;height:200px;flex-direction: row;flex-wrap:wrap">
                    <div *ngFor="let cam of campusList" style="border:1px solid black;width:30%;height:10%" (click)="chooseCam(cam)">{{cam.campusname}}</div>
                </div>
            </div>
            <div *ngIf="!addOrReturn">
                <div style="display:flex;justify-content: flex-start;margin-bottom:10px;align-items:center">
                    <p style="margin-right: 10px">在这里添加你的社团信息</p>
                    <button nz-button (click)="returnCamList()" [nzType]="'primary'">返回列表</button>
                </div>
                <div nz-row [nzGutter]="8">
                    <div nz-col [nzSpan]="16">
                        <div style="display: flex;margin-bottom: 10px;">
                            <div nz-col [nzSpan]="5" style="margin-right: 5px">社团名称:</div>
                            <div nz-col [nzSpan]="16"><nz-input [(ngModel)]="newcamname"></nz-input></div>
                        </div>
                        <div style="display: flex;margin-bottom: 10px;">
                            <div nz-col [nzSpan]="5" style="margin-right: 5px">社团类型:</div>
                            <div  nz-col [nzSpan]="16">
                                <nz-select [(ngModel)]="newcamtype" [nzPlaceHolder]="'请选择社团类型'" style="width:100%">
                                    <nz-option *ngFor="let opt of campustypeList" [nzValue]="opt.camtype" [nzLabel]="opt.desc">{{opt.desc}}</nz-option>
                                </nz-select>
                            </div>
                        </div>
                        <div style="display: flex;margin-bottom: 10px;justify-content: flex-start;">
                            <div nz-col [nzSpan]="5" style="margin-right: 5px">社团性质:</div>
                            <div nz-col [nzSpan]="16">
                                <nz-select [(ngModel)]="newcamlevel" [nzPlaceHolder]="'请选择社团性质'" style="width:100%">
                                    <nz-option *ngFor="let opl of campuslevelList" [nzValue]="opl.level" [nzLabel]="opl.desc">{{opl.desc}}</nz-option>
                                </nz-select>
                            </div>
                        </div>
                        <div style="display: flex;margin-bottom: 10px;">
                            <div nz-col [nzSpan]="5" style="margin-right: 5px">社团规模:</div>
                            <div nz-col [nzSpan]="16"><nz-input [(ngModel)]="newcamscale"></nz-input></div>
                        </div>
                        <div style="display: flex;margin-bottom: 10px;">
                            <div nz-col [nzSpan]="5" style="margin-right: 5px">社团介绍:</div>
                            <div nz-col [nzSpan]="16"><nz-input [(ngModel)]="newcamintroduce"></nz-input></div>
                        </div>
                        <div>
                            <button nz-button [nzType]="'primary'" (click)="confirmAddCampus()">确认提交社团</button>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="5">
                        <nz-upload
                            nzAction="https://localhost:8888/"
                            nzListType="picture-card"
                            [(nzFileList)]="newfileList"
                            [nzShowButton]="newfileList.length < 1"
                            [nzPreview]="handlePreview">
                            <i class="anticon anticon-plus"></i>
                            <div class="ant-upload-text">Upload</div>
                        </nz-upload>
                        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent1" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                            <ng-template #modalContent1>
                                <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                            </ng-template>
                        </nz-modal>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    <ng-template #modalfooter>
        <div *ngIf="noticeuni!=null">
            {{noticeuni}}
        </div>
        <div *ngIf="noticeCampus!=null">
            <p>{{noticeCampus}}<a *ngIf="camarea" (click)="campusArea()">展开</a><a *ngIf="!camarea" (click)="campusArea()">折起</a></p>
            <div *ngIf="!camarea" style="width:40%">
                <div>
                    <nz-input [nzType]="'search'" [nzPlaceHolder]="'请输入校区全称'" [(ngModel)]="newarea"></nz-input>
                </div>
                <div>
                    <nz-select [(ngModel)]="addAreaPro" [nzPlaceHolder]="'请选择省'" (nzOpenChange)="chooseProvince(addAreaPro,1)" style="width:50%">
                        <nz-option *ngFor="let op of province" [nzValue]="op" [nzLabel]="op.province">{{op.province}}</nz-option>
                    </nz-select>
                    <nz-select [(ngModel)]="addAreaCity" [nzPlaceHolder]="'请选择市'" style="width:50%">
                        <nz-option *ngFor="let op of cityList" [nzValue]="op.cityid" [nzLabel]="op.city">{{op.city}}</nz-option>
                    </nz-select>
                </div>
                <div>
                    <nz-input [nzPlaceHolder]="'请输入街道、门牌号'"></nz-input>
                </div>
                <div>
                    <button nz-button (click)="confirmAddArea()">确认</button>
                </div>
            </div>
        </div>
    </ng-template>
</nz-modal>
